<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="viewport-fit=cover, width=device-width, user-scalable=no">
    <title>OpenSiv3D for Web</title>
    <style>
      body {
        font-family: arial;
        overflow: hidden;
        margin: 0px;
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        background-color: gray;
      }

      div.dummy {
        position: fixed;
        width: 100vw;
        height: 100vh;
      }

      #app {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: gray;
      }

      #app-container {
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;
      }

      #canvas-container {
        flex: auto;
      }

      @media screen and (orientation: landscape) and (max-height: 480px) {
        #app-container {
          flex-flow: row;
        }

        #canvas-container {
          min-width: 0px;
        }
      }

      @media screen and (min-height: 480px) {
        #app-container {
          flex-flow: column;
        }

        #canvas-container {
          min-height: 0px;
        }
      }

      canvas.emscripten {
        border: 0px none;
        background-color: gray;
        width: 100%;
        height: 100%;
      }

      #progress-frame {
        position: absolute;
        z-index: 10;
        left: 0px; top: 0px; right: 0px;
        border: 1px solid rgb(120, 120, 120);
        background-color: rgb(60, 60, 60);
      }

      #progress {
        height: 10px;
      }

      div.progress-ok {
        background-color: rgb(189, 215, 46);
      }

      div.progress-error {
        background-color: rgb(215, 66, 46);
      }

      #footer-control {
        z-index: 15;
        flex: 0 0 1.2cm;
        background-color: rgb(60, 60, 60);
    
        display: flex;
        justify-content: flex-end; 
        align-items: center;
      }

      @media screen and (orientation: landscape) and (max-height: 480px) {
        body {
          padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        #footer-control {
          flex-flow: column;
          padding-right: env(safe-area-inset-right, 0px);
        }
      }

      @media screen and (min-height: 480px) {
        body {
          padding-right: env(safe-area-inset-right, 0px);
        }

        #footer-control {
          flex-flow: row;
          padding-bottom: env(safe-area-inset-bottom, 0px);
        }
      }

      .footer-button {
        width: 1cm;
        height: 1cm;
      }

      .footer-button::after {
        width: 0.3cm;
        height: 1cm;
      }

      .st0 {
        fill:#CBCBCB;
      }

      .st0:hover {
        fill:#FBFBFB;
      }

      .st1 {
        fill:#CBCBCB;
        transition: all 0.2s ease-out;
      }

      .st1:hover {
        fill:#FBFBFB;
      }

      .playground-overlay {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;

        color: white;
        background: rgba(0, 0, 0, 0.5);
        transition: color 0.2s ease-out;

        font-size: large;
      }

      .playground-overlay:hover {
        border-color: white;
      }

      .play-button, .reload-button {
        margin-left: auto;
        margin-right: auto;
        width: 3cm;
        height: 3cm;
      }

      .button-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
      }

      .error-text {
        margin-top: 1em;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="playground-overlay" hidden="true">
        <span class="button-container">
          <div class="play-button">
            <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
              <g>
                <path class="st1" d="M256,0C114.625,0,0,114.625,0,256c0,141.374,114.625,256,256,256c141.374,0,256-114.626,256-256
                  C512,114.625,397.374,0,256,0z M351.062,258.898l-144,85.945c-1.031,0.626-2.344,0.657-3.406,0.031
                  c-1.031-0.594-1.687-1.702-1.687-2.937v-85.946v-85.946c0-1.218,0.656-2.343,1.687-2.938c1.062-0.609,2.375-0.578,3.406,0.031
                  l144,85.962c1.031,0.586,1.641,1.718,1.641,2.89C352.703,257.187,352.094,258.297,351.062,258.898z"/>
              </g>
            </svg>
          </div>
          <div class="reload-button" hidden="true">
            <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
              <g>
                <path class="st1" d="M268.175,488.161c98.2-11,176.9-89.5,188.1-187.7c14.7-128.4-85.1-237.7-210.2-239.1v-57.6c0-3.2-4-4.9-6.7-2.9
                  l-118.6,87.1c-2,1.5-2,4.4,0,5.9l118.6,87.1c2.7,2,6.7,0.2,6.7-2.9v-57.5c87.9,1.4,158.3,76.2,152.3,165.6
                  c-5.1,76.9-67.8,139.3-144.7,144.2c-81.5,5.2-150.8-53-163.2-130c-2.3-14.3-14.8-24.7-29.2-24.7c-17.9,0-31.9,15.9-29.1,33.6
                  C49.575,418.961,150.875,501.261,268.175,488.161z"/>
              </g>
            </svg>
          </div>
          <div class="error-text"></div>
        </span>
      </div>
      <div id="progress-frame">
        <div id="progress" class="progress-ok" hidden></div>
      </div>
      <div id="app-container">
        <div id="canvas-container">
          <canvas
            class="emscripten"
            id="canvas"
            oncontextmenu="event.preventDefault()"
            tabindex="-1"
            hidden="true"
          ></canvas>
        </div>
        <div id="footer-control">
          <a class="footer-button st0" href="javascript:void(0);" onclick="toggleAudioContext()">
            <svg id="sound-off" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
              <g class="st0">
                <path d="M0,204.883V307.12c0,21.22,17.212,38.437,38.442,38.437h71.582V166.446H38.442
                  C17.212,166.446,0,183.653,0,204.883z"/>
                <path d="M288.033,94.716c-3.872-2.382-8.696-2.568-12.744-0.517l-142.237,72.246v179.112l142.237,72.246
                  c4.048,2.051,8.872,1.856,12.744-0.517c3.872-2.373,6.226-6.582,6.226-11.123V105.839
                  C294.259,101.298,291.905,97.089,288.033,94.716z"/>
                <path d="M453.117,253.467l54.386-54.394c5.996-5.996,5.996-15.713,0-21.709c-5.996-5.996-15.713-5.996-21.709,0
                  l-54.386,54.385l-54.394-54.385c-5.997-5.996-15.713-5.996-21.709,0c-5.997,5.996-5.997,15.713,0,21.709l54.384,54.394
                  l-54.384,54.385c-5.997,5.996-5.997,15.713,0,21.709c5.996,5.996,15.712,5.996,21.709,0l54.394-54.386l54.386,54.386
                  c5.996,5.996,15.713,5.996,21.709,0c5.996-5.996,5.996-15.713,0-21.709L453.117,253.467z"/>
              </g>
            </svg>
            <svg id="sound-on" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; display: none;" xml:space="preserve">
              <g>
                <path d="M0,206.254v99.491c0,20.663,16.752,37.418,37.414,37.418h69.667V168.844H37.414
                  C16.752,168.844,0,185.591,0,206.254z"/>
                <path d="M280.326,99.026c-3.768-2.31-8.464-2.5-12.403-0.494l-138.431,70.313v174.319l138.431,70.313
                  c3.94,1.996,8.635,1.806,12.403-0.503c3.764-2.31,6.059-6.416,6.059-10.826V109.86C286.386,105.441,284.09,101.335,280.326,99.026z
                  "/>
                <path d="M408.522,162.666c-5.066-5.626-13.725-6.073-19.346-1.007c-5.618,5.057-6.068,13.715-1.007,19.341
                  c19.15,21.252,28.713,48.074,28.718,75c-0.005,26.936-9.567,53.756-28.713,74.998c-5.066,5.618-4.615,14.285,1.002,19.351
                  c5.617,5.056,14.28,4.61,19.341-1.007c23.842-26.451,35.775-59.944,35.765-93.342C444.291,222.61,432.358,189.107,408.522,162.666z
                  "/>
                <path d="M458.88,117.33c-5.061-5.617-13.72-6.064-19.342-0.998c-5.622,5.056-6.073,13.715-1.007,19.341
                  c30.722,34.092,46.068,77.156,46.077,120.326c-0.01,43.168-15.355,86.232-46.077,120.334c-5.066,5.618-4.614,14.276,1.007,19.342
                  c5.622,5.066,14.28,4.62,19.346-1.008C494.289,355.367,512.01,305.631,512,256C512.01,206.368,494.289,156.631,458.88,117.33z"/>
                <path d="M338.764,207.032c-5.622,5.057-6.073,13.725-1.007,19.342c7.594,8.43,11.362,18.98,11.371,29.626
                  c-0.009,10.644-3.777,21.194-11.371,29.634c-5.066,5.618-4.614,14.276,1.007,19.341c5.622,5.066,14.28,4.609,19.341-1.007
                  c12.261-13.601,18.43-30.832,18.415-47.968c0.015-17.137-6.154-34.359-18.415-47.96
                  C353.044,202.414,344.382,201.967,338.764,207.032z"/>
              </g>
            </svg>
          </a>
          <a class="footer-button" href="javascript:void(0);" onclick="enterFullscreen()">
            <svg width="1cm" height="1cm" viewBox="0 0 100 100"
                xmlns="http://www.w3.org/2000/svg" version="1.1">
              
              <rect x="10" y="20" width="80" height="60"
                    fill="none" stroke="white" stroke-width="5"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <script>
      const appContainer = document.querySelector("#app");
      const progressElement = document.querySelector("#progress");
      const canvasContainerElement = document.querySelector("#canvas-container");
      const soundOnIcon = document.querySelector('#sound-on');
      const soundOffIcon = document.querySelector('#sound-off');
      let gainNode;
      /** @type { AudioContext } */
      let audioCtx;

      function enterFullscreen() {
        const fullscreenFunction = 
          canvasContainerElement.requestFullscreen || 
          canvasContainerElement.webkitRequestFullscreen ||
          function() {
            alert("Fullscreen is not supported on iOS")
          };
        fullscreenFunction.call(canvasContainerElement);
      }

      function onExitFullscreen() {
        if (document.fullscreen) {
          // switched to normal
          doResize();
        } else {
          // switched to fullscreen
          doResize();
        }
      }

      function onResize() {
        setTimeout(doResize, 100);
      }

      function doResize() {
        appContainer.style.height = `${window.innerHeight}px`;
        Options["setFramebufferSize"](canvasContainerElement.clientWidth * devicePixelRatio, canvasContainerElement.clientHeight * devicePixelRatio);
      }

      function onAudioInit() {
        // Inject Gain Node

        audioCtx = Options["getCurrentAudioContext"]();
        /** @type { ScriptProcessorNode } */
        const audioSource = Options["getCurrentAudioSource"]();

        if (audioCtx.state == "suspended") {
          showSoundOffIcon();
        } else {
          showSoundOnIcon();
        }

        gainNode = audioCtx.createGain();
        audioSource.disconnect(audioCtx.destination);
        audioSource.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        audioCtx.addEventListener("statechange", updateAudioStatus);
      }

      function updateAudioStatus() {
        if (audioCtx.state != "running" || gainNode.gain.value == 0.0) {    
          showSoundOffIcon();
        } else {   
          showSoundOnIcon();
        }
      }
      
      async function toggleAudioContext() {  
        if (audioCtx.state != "running") {
          return;
        }

        if (gainNode.gain.value == 1.0) {
          gainNode.gain.value = 0.0;
        } else {
          gainNode.gain.value = 1.0;     
        }

        updateAudioStatus();
      }

      function showSoundOnIcon() {
        soundOnIcon.style.display = "inline";
        soundOffIcon.style.display = "none";
      }

      function showSoundOffIcon() {
        soundOnIcon.style.display = "none";
        soundOffIcon.style.display = "inline";
      }

      let hasRaiseRuntimeError = false;

      function onRuntimeError() {
        progressElement.classList.add('progress-error');
        progressElement.style.width = '100%';
        progressElement.hidden = false;

        hasRaiseRuntimeError = true;
      }

      const Options = {
        preRun: [],
        postRun: [ doResize, onAudioInit ],
        onAbort: function (e) {
          onRuntimeError();
        },
        onAlert: function (text) {
          document.querySelector(".error-text").textContent = text;
        },
        canvas: (function () {
          var canvas = document.getElementById("canvas");

          // As a default initial behavior, pop up an alert when webgl context is lost. To make your
          // application robust, you may want to override this behavior before shipping!
          // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
          canvas.addEventListener(
            "webglcontextlost",
            function (e) {
                alert("WebGL context lost. You will need to reload the page.");
                onRuntimeError();
                e.preventDefault();
            },
            false
          );

          return canvas;
        })(),
        setStatus: function (text) {
          if (!Options["setStatus"].last)
          Options["setStatus"].last = { time: Date.now(), text: "" };
          if (text === Options["setStatus"].last.text) return;
          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
          var now = Date.now();
          if (m && now - Options["setStatus"].last.time < 30) return; // if this is a progress update, skip it if too soon
          Options["setStatus"].last.time = now;
          Options["setStatus"].last.text = text;
          if (m) {
            text = m[1];
            progressElement.style.width = `${parseInt(m[2]) * 100 / parseInt(m[4])}%`;
            progressElement.hidden = false;   
          } else if (!hasRaiseRuntimeError) { 
            progressElement.hidden = true;
          }
        },
        totalDependencies: 0,
        monitorRunDependencies: function (left) {
          this.totalDependencies = Math.max(this.totalDependencies, left);
          Options["setStatus"](
          left
              ? "Preparing... (" +
                  (this.totalDependencies - left) +
                  "/" +
                  this.totalDependencies +
                  ")"
              : "All downloads complete."
          );
        },
        onRuntimeInitialized: function() {
          window.addEventListener("resize", onResize);
          window.addEventListener("fullscreenchange", onExitFullscreen);
        },
        onRuntimeExit: function() {
          var overlay = document.querySelector(".playground-overlay");
          overlay.hidden = false;

          var reloadButton = document.querySelector(".reload-button");
          reloadButton.hidden = false;

          var playButton = document.querySelector(".play-button");
          playButton.hidden = true;

          reloadButton.addEventListener("click", function() {
            location.reload();
          });
        }
      }
      Options["setStatus"]("Downloading...");
    </script>
    {{{ SCRIPT }}}
    <script>
      if (window != window.parent) {
        var overlay = document.querySelector(".playground-overlay");
        overlay.hidden = false;

        overlay.addEventListener("click", function onClick() {
          overlay.removeEventListener("click", onClick);
          overlay.hidden = true;

          Options.canvas.hidden = false;
          Runtime(Options);
        });
      } else {
        document.querySelector("script[async]").addEventListener('load', function() {
          Options.canvas.hidden = false;
          Runtime(Options);
        });
      }
    </script>
  </body>
</html>
